<template>
    <div>
        <!-- :class="[footerShow ? 'foot_box':'foot_box_none']" -->
      <footer class="foot_box">

          我从来不梦想，我只是在努力认识现实。
          Copyright @XuanYi 1120760701@qq.com
      </footer>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 是否显示
      footerShow: false
    }
  },
  methods: {
    // 鼠标滚动监听
    handleScroll () {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      // console.log('scrollHeight=' + scrollHeight)
      // console.log('scrollTop + windowHeight' + (scrollTop + windowHeight))
      // 滚动到底部的条件
      if (scrollTop + windowHeight + 10 >= scrollHeight) {
        // console.log('已经滚到底部！')
        this.footerShow = true
      } else {
        this.footerShow = false
      }
    }

  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  created () {
    // var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
    // var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    // console.log(windowHeight)
    // console.log(scrollHeight)
    // if (scrollHeight === windowHeight) {
    //   console.log('shit')
    //   this.footerShow = true
    // }
  }

}
</script>

<style lang="less" scoped>
.foot_box{
    // border: 1px solid rebeccapurple;
    // background-color: #fff;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 -1px 3px 1px rgba(99, 98, 98, 0.1);
    opacity: 0.9 !important;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.5s;

}
.foot_box_none{
    height: 0;
    bottom: 0;
    *{
        display: none;
    }
}
</style>
